<!DOCTYPE html>
<html>
	<head>
		<title>Setting/Getting structure</title>
        <link rel="stylesheet" href="../../codebase/webix/webix.css" type="text/css" charset="utf-8">
        <script src="../../codebase/webix/webix.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="../../codebase//pivot.css" type="text/css" charset="utf-8">
        <script src="../../codebase/pivot.js" type="text/javascript" charset="utf-8"></script>

        <link rel="stylesheet" href="../common/samples.css" type="text/css" charset="utf-8">
        <script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class='header_comment'>Setting/Getting structure</div>
		<div id="testA"></div>

        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            .webix_message_area{
                width:400px;
            }
        </style>

		<script type="text/javascript" charset="utf-8">

        var structures = [{
            label:"GDP/Oil by forms/countries/years",
            structure:{
                rows: ["form", "name"],
                columns: ["year"],
                values: [{ name:"gdp", operation:"sum"}, { name:"oil", operation:"sum"}],
                filters:[]
            }
        },{
            label:"Oil by forms/continents",
            structure:{
                rows: ["form"],
                columns: ["continent"],
                values: [{ name:"oil", operation:"max"}],
                filters:[{name:"name",type:"select"}]
            }
        },{
            label:"Balance by years/forms/continents",
            structure:{
                rows: ["year"],
                columns: ["form", "continent"],
                values: [{name:"balance", operation:"sum"}],
                filters:[{name:"name", type:"text"}]
            }
        },{
            label:"Balance, GDP, Oil by years/forms",
            structure:{
                rows: ["year"],
                columns: ["form"],
                values: [{name:"balance", operation:"max"},{name:"gdp", operation:"max"},{name:"oil", operation:"max"}],
                filters:[{name:"name", type:"text"}]
            }
        },{
            label:"Balance, GDP, Oil by countries/years",
            structure:{
                rows: ["name"],
                columns: ["year"],
                values: [{name:"balance", operation:"max"},{name:"gdp", operation:"max"},{name:"oil", operation:"max"}],
                filters:[{name:"form", type:"select"}]
            }
        }];

		webix.ready(function(){
			webix.ui({
                container:"testA",
                cols:[{
                        id:"pivot",
                        view:"pivot",
                        height:400,
                        width:1000,
                        data:pivot_dataset,
                        max: true,
                        structure: {
                            rows: ["form", "name"],
                            columns: ["year"],
                            values: [{ name:"gdp", operation:"sum"}, { name:"oil", operation:"sum"}],
                            filters:[]
                        }
                    },
                    { view:"resizer"},
                    { rows:[
                        { template:"Click to load structure", type:"header"},
                        { view:"list", id:"structures", data:structures, template:"#label#", width: 250, select:true },
                        { view:"toolbar", cols:[{ view: "button", id:"get", label:"Get structure"}]}
                    ]
                }]
            });

            $$("structures").attachEvent("onItemClick", function(id) {
                var str = webix.copy(this.getItem(id).structure);
                $$("pivot").setStructure(str);

            });
            $$("get").attachEvent("onItemClick", function() {
                var str = $$("pivot").getStructure();
                webix.message(JSON.stringify(str));
            });

		});

		</script>
	</body>
</html>